<template>
  <div>
    <generaltable
      :headerData="headerData"
      :tableData="tableData"
      :total="total"
      :tableStyle="tableStyle"
      @sizeChange="sizeChange"
      @currentChange="currentChange"
    >
      <template v-slot:mobile="{ row }"
        ><span @click="mobileClick(row)">{{ row.mobile }}</span></template
      >
      <template v-slot:name="{ row }"
        ><span @click="nameClick(row)">{{ row.name }}</span></template
      >
    </generaltable>
  </div>
</template>
<script>
import { collectionList } from "@/api/collectionList";
import generaltable from "@/components/generaltable.vue";
export default {
  name: "FavoritesList",
  data() {
    return {
      total: 0,
      page: 1,
      limit: 20,
      headerData: [
        {
          prop: "mobile",
          label: "用户",
          slot: true
        },
        {
          prop: "name",
          label: "商品",
          slot: true
        }
      ],
      tableData: []
    };
  },
  mounted() {
    let _self = this;
    _self.obtainCollectionList();
  },
  methods: {
    tableStyle() {
      return {
        color: "blue"
      };
    },
    mobileClick(row) {
      let _self = this;
      _self.$router.push({
        name: "detail",
        query: {
          id: row.idUser
        }
      });
    },
    nameClick(row) {
      let _self = this;
      _self.$router.push({
        name: "ProductEditing",
        query: {
          id: row.id
        }
      });
    },
    sizeChange(val) {
      let _self = this;
      _self.limit = val;
      _self.obtainCollectionList();
    },
    currentChange(val) {
      let _self = this;
      _self.page = val;
      _self.obtainCollectionList();
    },
    obtainCollectionList() {
      let _self = this;
      let data = {
        page: _self.page,
        limit: _self.limit
      };
      collectionList(data).then(res => {
        if (res.code == 20000) {
          _self.tableData = [];
          for (let item of res.data.records) {
            _self.tableData.push({
              id: item.idGoods,
              idUser: item.idUser,
              mobile: item.user.mobile,
              name: item.goods.name
            });
          }
          _self.total = res.data.total;
        }
      });
    }
  },
  components: {
    generaltable
  }
};
</script>
<style></style>
